<!--展示模板（html），可帮助我们包裹元素,内部必须只有一个根元素-->
<template>
<div>
<!--<搜索框 id(页面不能重复)="TopFilterss":搜索框配置项（搜索框

        ref="table"                ID
        :columns="columns"         table的配置项 初始化
        :params="fetchParams"      调用后台的查询参数
        :fetchapi="fetchapi"        接口地址（引用的方法）
        :datakey="'records'"        后台集合的名字
        :onColumnsChange="(columns) => (this.columns = columns)"  必须有 列表筛选顺序 表头里的排序
        :onRowSelectChange="selectChange"  行选中调用
      >   -->
      <!-- 带搜索过滤的Table组件, 支持 Input输入框 和 Select下拉框两种表格筛选方式-->
      <FilterTable
      ref="table"
      :columns="columns"
      :params="fetchParams"
      :fetchapi="fetchapi"
      :datakey="'records'"
      :onColumnsChange="columns => (this.columns = columns)"
      :is-select-column="true"
      :onRowSelectChange="selectChange"
      >
        <!--插槽 在table中使用filter过滤器需要借助插槽-->
        <template slot="controls" slot-scope="props">
        <!--<按钮组 大小="small" 类型="primary" 图标="el-icon-check" 调用组件的属性:="qiyong.bind()"相当于html里的onclick（）="add() ” :控制按钮是否能点击true能="disableds">启用</multiuse-button>-->

        <multiuse-button size="small" type="primary" icon="el-icon-plus" @click="add()">新增</multiuse-button>

      </template>
      </FilterTable>

    <!--整车保修期新增-->
    <BaseDialog :visible.sync="visibleAdd" :title="'新增'" destroyOnClose width="850px" :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}">
      <AddForm @close="closeAdd" @save="saveAdd"></AddForm>
    </BaseDialog>
      <!--整车保修期编辑-->
    <BaseDialog :visible.sync="emitVisible" title="编辑" width="850px" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <editForm @close="emitCloseHandle" @save="emitChange" :rowData="rowData" />
    </BaseDialog>

</div>
</template>
<script>
//引入 写在<script>标签的第一行

// import AddForm from './AddForm.vue';
import editForm from './editForm.vue';
import importExcel from '@/pages/claimDemage/tools/importExcel.vue';
import { exportExcelFile } from '@/utils/index';

/*它的作用只是用于导出模块，在别的模块需要调用这个模块的时候，可以通过import命令引入使用。一个模块只能有一个默认输出，因此export  default命令只能使用一次*/
export default {
  //所有引入的index页面写在components里
  components: {
    AddForm,
    // editForm
  },
  data() {
    // 业务逻辑里面定义的数据写在return里
    return {
      //使用this定义topFilterInitFun()函数
      topFilterInit: this.topFilterInitFun(),
      collapse: true,
      visible: false,
      visibleAdd: false,
      emitVisible: false,
      //exportLoading: false,
      disableds: true,
      columns: this.creatHeader(),
      fetchParams: {xhrAbort: true},
      rowData: {},
      fetchapi: " "
    };
  },
  /*在模板渲染成html前或者模板编译进路由前调用created,即通常初始化某些属性值，然后再渲染成视图*/
  created() {
    this.chuqi();
  },
  methods:{
    /*用async/ await来发送异步请求，从服务端获取数据  初始化页面调用的方法*/
    //async作为一个关键字放到函数前面
    async chuqi(){

    },
    //选中
    selectChange(rows) {
      this.selectedRows = rows;
      this.disableds = this.selectedRows.length <= 0;
      console.log(this.selectedRows);
    },
    //编辑
    emitFun(val) {
      this.rowData = val;
      this.emitVisible = true;
    },
    //编辑弹窗的close
    emitCloseHandle() {
      this.emitVisible = false;
    },
    //编辑弹窗的save
    emitChange() {
      this.emitVisible = false;
      this.fetchParams = { ...this.fetchParams };
    },

    //新增弹窗的close
    closeAdd() {
     this.visibleAdd = false;
      //刷新列表
      //this.fetchParams = { ...this.fetchParams };
    },
    //新增弹窗的save
    saveAdd() {
      this.visibleAdd = false;
      this.fetchParams = { ...this.fetchParams };
    },

    //新增的add
    add() {
      this.visibleAdd = true;
    },

    //搜索获取数据
    changeHandle(val) {
      /*刷新表格 用它*/
      this.fetchParams = Object.assign({}, this.fetchParams, val,{xhrAbort: false});
      console.log(this.fetchParams);
    },
    //搜索数据
    topFilterInitFun() {
       /*业务逻辑里面定义的数据*/
      return [

        {
          type: 'INPUT',
          label: '保修里程',
          fieldName: 'vpMile',
          initialValue: '',
          placeholder: '请输入保修里程...',
          rules: [
            {
              validator: (rule, value, callback) => {
                if(value) {
                  if (Number.isInteger(Number(value))) {
                    callback();
                  } else {
                    callback(new Error('请输入数字值'));
                  }
                } else {
                  callback();
                }
              },
              trigger: ['blur', 'change'],
            },
          ],
          unitRender: () => {
            return <span>(KM)</span>;
          },
        }

      ];
    },
    //table表头和数据源
    creatHeader() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          fixed: 'left',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 100,
          render: (props, h) => {
            return (
              <div style="text-align:center">
                <multiuse-button size="mini" type="text" onClick={() => this.emitFun(props.row)}>
                  编辑
                </multiuse-button>
              </div>
            );
          }
        },
        {title: '保修里程（KM）', dataIndex: 'vpMile', sorter: true}

      ];
    },
  }
};
</script>
<style lang="less" scoped></style>
